<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <div class="select-area">
      <box-with-position
        :key="item.id"
        v-for="item in getCurrentLotteryState"
        :item="item"
        @click="handleUpdateData"
        class="select-row-adjust"
      ></box-with-position>
    </div>
  </div>
  <div v-else>
    <lottery-box-cleaner-phone
      :key="item.id"
      v-for="item in getCurrentLotteryState"
      :item="item"
      @click="handleUpdateData"
      class="select-row-adjust"
    ></lottery-box-cleaner-phone>
  </div>
</template>

<script>
import BoxWithPosition from '@/components/lottery-type/common/box-with-position'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxCleanerPhone from '@/components/lottery-type/common/lottery-box-cleaner-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [boxWithCleanerMixin],
  components: {
    BoxWithPosition,
    PlayInstruction,
    LotteryBoxCleanerPhone
  },
  data() {
    return {
      // 玩法说明
      instruction: '龙虎和玩法说明',
      lotteryCount: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .select-row-adjust >>> .active
      background $color-theme-red 
      border 1px solid $color-theme-red
      .box-top 
        color #fff
      .box-bottom 
        color #fff
    .select-row-adjust >>> .select-row 
      width 100%
      padding 0
      margin-bottom 10px
      padding-right 10px
      justify-content space-between
      .box 
        width 108px
    .select-row-adjust >>> .tail-box
      width 108px
      margin 0 
    .select-area 
      display flex
      flex-wrap wrap
      box-sizing border-box
      padding 0 20px
      .select-row-adjust
        width 50%
        &:last-child >>> .select-row 
          padding-right 0
        &:nth-child(2) >>> .select-row 
          padding-right 0

  @media screen and (max-width 750px) 
    .select-row-adjust >>> .select-row 
      padding 0 10px !important
      .bottom 
        width 100%
        .row1 
          justify-content space-between
          .box 
            width calc((100% - 30px) / 3) !important
    .select-row-adjust >>> .box   
      &.active 
        background $color-theme-red 
        border 1px solid $color-theme-red
        .box-top 
          color #fff
        .box-bottom 
          color #fff
  
</style>